<template>
<div class="profile-page">

  <div class="user-info">
    <div class="container">
      <div class="row">

        <div class="col-xs-12 col-md-10 offset-md-1">
          <img :src="profile.image" class="user-img" />
          <h4>{{profile.username}}</h4>
          <p>
            {{profile.bio}}
          </p>
          <button class="btn btn-sm btn-outline-secondary action-btn">
            <i class="ion-plus-round"></i>
            &nbsp;
            Follow Eric Simons 
          </button>
        </div>

      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">

      <div class="col-xs-12 col-md-10 offset-md-1">
        <div class="articles-toggle">
          <ul class="nav nav-pills outline-active">
            <li class="nav-item">
               <nuxt-link class="nav-link"
                :class="{
                    'active':tab==='my_article'
                }"
                exact
                :to="{
                    name:'profile',
                    query:{
                        tab:'my_article'
                    },
                    params:{
                      username: profile.username
                    }
                }">
                My Articles
              </nuxt-link>
            </li>
            <li class="nav-item">
              <nuxt-link class="nav-link"
                :class="{
                    'active':tab==='favorited_article'
                }"
                exact
                :to="{
                    name:'profile',
                    query:{
                        tab:'favorited_article'
                    },
                    params:{
                      username: profile.username
                    }
                }">
                Favorited Articles
              </nuxt-link>
            </li>
          </ul>
        </div>

        <div class="article-preview" v-for="article in articles" :key="article.slug">
          <div class="article-meta">
            <a href="">
              <img :src="article.author.image" />
            </a>
            <div class="info">
              <a href="" class="author">{{article.author.username}}</a>
              <span class="date">{{article.createdAt | date('MMM DD,YYYY')}}</span> 
            </div>
            <button class="btn btn-outline-primary btn-sm pull-xs-right" 
            :class="{
                active: article.favorited
            }"
            @click="onFavorite(article)"
            :disabled="article.favoritedDisable"
            >
              <i class="ion-heart"></i> {{article.favoritesCount}}
            </button>
          </div>
          <nuxt-link :to="{
                            name:'article',
                            params:{
                                slug: article.slug     
                            }
                        }"
           class="preview-link">
            <h1>{{article.title}}</h1>
            <p>{{article.description}}</p>
            <span>Read more...</span>
          </nuxt-link>
        </div>

         <ul class="pagination">
              <li class="page-item ng-scope"
              v-for="item in totalPage" :key="item">
                  <nuxt-link class="page-link ng-binding" :to="{
                    name:'profile',
                    query:{
                        tab,
                        page: item
                    },
                    params:{
                      username: profile.username
                    }
                  }">
                      {{item}}
                  </nuxt-link>
              </li>
          </ul>

      </div>

    </div>
  </div>

</div>
</template>

<script>
import { getProfile } from '@/api/profile'
import { getArticles,addFavorite,deleteFavorite} from '@/api/article'

export default {
    middleware:'authenticated',
    name:'profileIndex',
    data(){
      return {
        // profile:{}
      }
    },
    computed:{
        totalPage(){
            return Math.ceil(this.articlesCount/this.limit)
        }
    },
    async asyncData({params,query}){
      const username = params.username
      const page = Number.parseInt(query.page || 1)
      const limit = 5
      const tab =  query.tab || 'my_article'
      console.log(username)
      const {data: profileData} = await getProfile(username)
      const paramsData = tab === 'my_article' ?
                                { 
                                  author: username,
                                  limit,
                                  offset:(page-1)*limit,
                                } : 
                                { 
                                  favorited: username,
                                  limit,
                                  offset:(page-1)*limit,
                                }
      const {data: articlesData} =  await getArticles(paramsData)
      console.dir(profileData)
      console.log(articlesData)

      const {articles,articlesCount} = articlesData
      articles.forEach(article=>article.favoritedDisable = false)

      return {
          articles,
          articlesCount,
          limit,
          page,
          tab,
          profile: profileData.profile
          }
    },
    watchQuery: ['page','tab'],

    // async mounted(){
    //   const username = this.$route.params.username
    //   console.log(username)
    //   const {data} = await getProfile(username)
    //   console.dir(data)
    //   this.profile = data.profile
    // }
    methods:{
        async onFavorite(article){
            console.dir(article)
            article.favoritedDisable = true
            if(article.favorited == false){
                await addFavorite(article.slug)
                article.favorited = true
                article.favoritesCount += 1
            }else{
                await deleteFavorite(article.slug)
                article.favorited = false
                article.favoritesCount += -1
            }
            article.favoritedDisable = false
        }
    }
}
</script>

<style>

</style>